<template>
  <div>
    <crumb isShowBack/>
    <div class="course-study main-contianer2">
      <div class="right-content">
        <div class="online-now">当前播放</div>
        <div class="study-box">
          <div v-for="item in currentList" :key="item.id">
            <!-- 纯文本 -->
            <div class="media-box" v-if="item.fileType === '1'">
              <iframe style="width: 687px;height: 500px;" :src="'https://view.officeapps.live.com/op/view.aspx?src='+item.fileUrl"></iframe>
            </div>
            <!-- 图片 -->
            <div class="media-box" v-if="item.fileType === '2'">
              <img :src="item.fileUrl" style="max-width:100%;max-height:100%;display: block;margin: 0 auto;">
            </div>
            <!-- 音频 -->
            <div class="media-box" v-if="item.fileType === '3'">
              <audio class="audio" controls :src="item.fileUrl"></audio>
            </div>
            <!-- 视频 -->
            <div class="media-box" v-if="item.fileType === '4'">
              <video class="video" controls :src="item.fileUrl">
                <track :src="item.fileUrl" lang="en" label="English" kind="subtitles" default />
              </video>
            </div>
          </div>
          <div class="media-box" v-if="currentList.length < 1" style="text-align: center;line-height: 300px;">暂无数据</div>
        </div>
        <div class="online-bottoms">
          <div class="online-date">
            <i class="el-icon-time"></i>
            {{date}}
          </div>
          <div class="online-student" @click="isShowStudent=true">
            <i class="el-icon-s-custom"></i>
            在线学生
          </div>
        </div>
      </div>
      <div class="left-list">
        <ul class="tabs flex-row">
          <li :class="['tab', { 'active': tabId == 1 }]" @click="changeTab(1)">交流</li>
          <li :class="['tab', { 'active': tabId == 2 }]" @click="changeTab(2)">活动</li>
          <!--<el-badge :value="12" style="vertical-align: top;">活动</el-badge>-->
          <li :class="['tab', { 'active': tabId == 3 }]" @click="changeTab(3)">资源</li>
          <li :class="['tab', { 'active': tabId == 4 }]" @click="changeTab(4)">笔记</li>
        </ul>
        <div v-if="tabId == 1">
          <div class="online-actCon" style="height: 815px;">
            <div class="chat-box left" v-for="(item, index) in msgList" :key="index">
              <img :src="item.headUrl" class="chat-logo" alt="">
              <div class="chat-con">
                <div class="chat-name">{{item.name}}</div>
                <div class="chat-cont">{{item.interchangeContent}}</div>
              </div>
            </div>
          </div>
          <div class="chat-doBox">
            <div class="chat-doCon">
              <el-input class="chat-input" placeholder="请输入您的发言" v-model="msg"></el-input>
              <!--图片功能-->
              <!--el-upload-->
              <!--<div class="chat-uploadImg">-->
              <!--<i class="el-icon-picture"></i>-->
              <!--</div>-->
            </div>
            <el-button type="primary" @click="addExchange">发送</el-button>
          </div>
        </div>
        <div v-if="tabId == 2">
          <div class="online-actCon">
            <div class="online-acts" v-for="(item, index) in actList" :key="index">
              <div class="online-actBox">
                <div class="online-actKey">{{item.activityNoteName}}</div>
                <div class="online-actVal">
                  <el-button type="text" icon="el-icon-circle-check">{{item.activityInNum}}/{{item.activityNum}}</el-button>
                  <el-button type="text" icon="el-icon-time">{{item.noteTime}}</el-button>
                </div>
              </div>
              <div class="online-btnBox">
                <el-button type="primary" size="mini" plain @click="handleCommentView(item)" v-if="item.type === '4'">评分</el-button>
                <el-button type="primary" size="mini" plain @click="handleActView(item)">查看</el-button>
              </div>
            </div>
          </div>
        </div>
        <div v-if="tabId == 3">
          <div class="online-actCon">
            <div class="online-acts" @click="handleFile(index)" v-for="(item, index) in fileList" :key="index">
              <div class="online-actBox">
                <div class="online-actKey">{{item.fileName}}</div>
                <div class="online-actVal">
                  <el-button type="text" icon="el-icon-s-custom">{{item.name}}</el-button>
                  <el-button type="text" icon="el-icon-s-order">{{item.fileType}}M</el-button>
                </div>
              </div>
            </div>
          </div>
          <el-button type="primary" style="width: 100%;">上传资源</el-button>
        </div>
        <div v-if="tabId == 4">
          <div class="online-note" v-if="!noteState">{{note}}</div>
          <el-input type="textarea" class="online-note" placeholder="请输入笔记内容" v-model="note" v-else></el-input>
          <div class="online-notes">
            <el-button type="primary" icon="el-icon-edit" class="fr" v-if="!noteState" @click="noteState=true">记笔记</el-button>
            <el-button type="primary" icon="el-icon-edit" class="fr" v-else @click="saveOnlineLessonStuNote">保存</el-button>
          </div>
        </div>
      </div>
    </div>
    <online-student :id="onlineLessonId" :info="info" v-if="isShowStudent" @handleEmit="handleEmit"/>
    <view-share-box :id="activityId" v-if="isShowViewShare" @handleEmit="handleViewShare"/>
    <comment-box :id="activityId" v-if="isShowComment" @handleEmit="handleComment"/>
    <sign-box :id="activityId" :info="info" v-if="isShowSign" @handleEmit="handleSign"/>
    <test-box :id="activityId" v-if="isShowTest" @handleEmit="handleTest"/>
  </div>
</template>

<script>
import { entryOnlineCourse, current, exchangeList, addExchange, activityList, getOnlineLessonStuNote, saveOnlineLessonStuNote } from '@/api/student/lesson/classroom'
import { getOnlineResource } from '@/api/teacher/onlineCourse'
import onlineStudent from './onlineStudent'
import viewShareBox from './viewShareBox'
import commentBox from './commentBox'
import signBox from './signBox'
import testBox from './testBox'
import moment from 'moment'
export default {
  data () {
    return {
      onlineLessonId: this.$route.query.id,
      info: this.$route.params.info,
      date: new Date(),
      tabId: 1,
      isShowStudent: false,
      // 交流
      msg: '',
      msgList: [],
      // 活动
      actList: [],
      // 笔记
      noteState: false,
      note: '',
      // 资源
      fileList: [],
      currentList: [],
      // 分享
      isShowViewShare: false,
      activityId: undefined,
      isShowComment: false,
      // 开始签到
      isShowSign: false,
      // 即时测验
      isShowTest: false
    }
  },
  methods: {
    // 点击进入课堂
    async entryOnlineCourse () {
      const data = {
        startTime: moment().format('YYYY-MM-DD HH:mm:ss'),
        onlineLessonId: this.onlineLessonId
      }
      const res = await entryOnlineCourse(data)
      console.log(res)
    },
    async current () {
      const res = await current({ onlineLessonId: this.onlineLessonId })
      this.currentList = res.data
    },
    // 获取消息列表
    async exchangeList () {
      const res = await exchangeList({ onlineLessonId: this.onlineLessonId })
      this.msgList = res.data.reverse()
    },
    // 发送消息
    async addExchange () {
      const data = {
        onlineLessonId: this.onlineLessonId,
        interchangeContent: this.msg
      }
      const res = await addExchange(data)
      if (res.code === '200') {
        this.msg = ''
        this.exchangeList()
      }
    },
    // 获取活动列表
    async activityList () {
      const res = await activityList({ onlineLessonId: this.onlineLessonId })
      if (res.code === '200') {
        this.actList = res.data
      }
    },
    // 获取资源
    async getOnlineResource () {
      const res = await getOnlineResource({ onlineLessonId: this.onlineLessonId })
      if (res.code === '200') {
        this.fileList = res.data
      }
    },
    // 浏览资源
    handleFile (index) {
      this.currentList = []
      this.currentList.push(this.fileList[index])
    },
    // 获取笔记
    async getOnlineLessonStuNote () {
      const res = await getOnlineLessonStuNote({ onlineLessonId: this.onlineLessonId })
      if (res.code === '200') {
        this.note = res.data.noteStr
      }
    },
    // 保存笔记
    async saveOnlineLessonStuNote () {
      const data = {
        onlineLessonId: this.onlineLessonId,
        note: this.note
      }
      const res = await saveOnlineLessonStuNote(data)
      if (res.code === '200') {
        this.$message.success('笔记保存成功')
        this.note = ''
        this.noteState = false
        this.getOnlineLessonStuNote()
      }
    },
    changeTab (tab) {
      this.tabId = tab
    },
    // 评分
    handleCommentView (item) {
      this.activityId = item.activityId
      this.isShowComment = true
    },
    handleComment (params) {
      if (params) {
        this.activityId = undefined
        this.activityList()
      }
      this.isShowComment = false
    },
    // 查看分享
    handleActView (item) {
      if (item.type === '1') {
        this.activityId = item.activityId
        this.isShowSign = true
      }
      if (item.type === '3') {
        this.activityId = item.activityId
        this.isShowTest = true
      }
      if (item.type === '4') {
        this.activityId = item.activityId
        this.isShowViewShare = true
      }
    },
    handleViewShare () {
      this.isShowViewShare = false
    },
    handleSign (params) {
      if (params) {
        this.activityId = undefined
        this.activityList()
      }
      this.isShowSign = false
    },
    handleTest (params) {
      if (params) {
        this.activityId = undefined
        this.activityList()
      }
      this.isShowTest = false
    },
    // 在线学生
    handleEmit () {
      this.isShowStudent = false
    }
  },
  components: {
    onlineStudent,
    viewShareBox,
    commentBox,
    signBox,
    testBox
  },
  mounted () {
    // 修改路由名称
    this.$route.matched[2].meta.title = this.$route.query.lessonProject
    this.entryOnlineCourse()
    this.current()
    this.exchangeList()
    this.activityList()
    this.getOnlineResource()
    this.getOnlineLessonStuNote()
    this.timer = setInterval(() => {
      this.date = moment().format('YYYY-MM-DD HH:mm:ss')
    }, 1000)
    this.timer2 = setInterval(() => {
      this.exchangeList()
      this.activityList()
    }, 5000)
  },
  beforeDestroy () {
    if (this.timer) {
      clearInterval(this.timer)
    }
    if (this.timer2) {
      clearInterval(this.timer2)
    }
  }
}
</script>

<style scoped lang="scss" rel="stylesheet/scss">
  .course-study {
    height: 937px;
    width: 1200px;
    margin: 0 auto;
    .left-list {
      width: 452px;
      height: 100%;
      border: 1px solid #e5e5e5;
      border-radius: 5px;
      background: #fff;
    }
    .right-content {
      width: 728px;
      height: 100%;
      background: #fff;
      border: 1px solid rgba(229, 229, 229, 1);
      border-radius: 5px;
      overflow-y: scroll;
    }
  }
  .study-box {
    position: relative;
    .media-box {
      width: 727px;
      height: 820px;
      padding: 0 20px;
      .video {
        width: 687px;
        height: 460px;
        outline: none;
      }
    }
  }
  .tabs {
    width: 100%;
    height: 40px;
    margin-top: 20px;
    .tab {
      width: 25%;
      text-align: center;
      font-size: 20px;
      height: 40px;
      line-height: 40px;
      color: #101d37;
      cursor: pointer;
      &.active {
        color: #009cf6;
        position: relative;
        &::before {
          content: "";
          width: 52px;
          height: 3px;
          background: rgba(0, 156, 246, 1);
          border-radius: 3px;
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }
  }
</style>
